<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<p>点击图表展示更多</p> 

<div id="workflow-chart" style="width:1500px; height:880px;background-color: #cccccc"></div>
<!-- <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.3.min.js"><\/script>')</script> -->
<script src="js/vendor/echarts.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script>
    (function (window) {

        var myChart = echarts.init(document.getElementById("workflow-chart"));

        /*展开ds*/
        function expand(data) {
            if (data.type && data.type == 'ds') {
                var option = myChart.getOption();
                var nodesOption = option.series[0].data;
                var linksOption = option.series[0].links;
                if (!data.hasExpand) {
                    data.fields.forEach(function (fieldName) {
                        var field = _fields[fieldName];
                        if (field && !field.hasShow) {
                            nodesOption.push(field);//add
                            field.dss.forEach(function (ds) {
                                linksOption.push({source: field.name, target: ds})
                            })
                            field.hasShow = true;
                        }
                    });
                    data.hasExpand = true;
                    myChart.setOption(option);
                }
            }
        }

        /*折叠ds*/
        function collapse(data) {
            if (data.type && data.type == 'ds') {
                var option = myChart.getOption();
                var nodesOption = option.series[0].nodes;
                var linksOption = option.series[0].links;
                if (data.hasExpand) {
                    data.fields.forEach(function (fieldName) {
                        var field = _fields[fieldName];
                        if (field) {
                            var index = nodesOption.indexOf(field);//remove
                            nodesOption.splice(index, 1);
                            field.dss.forEach(function (ds) {
                                linksOption.push({source: field.name, target: ds})
                            })
                        }
                    })
                }
            }
        }

        function expandAll(opt) {
            var nodes = myChart.getOption().series[0].data;
            if (opt) {
                nodes.forEach(expand);
            } else {
                nodes.forEach(collapse);
            }
        }

        var _categories = [
            {name: '日志型数据', symbol: 'image://img/log.svg'},
            {name: '关系型数据', symbol: 'image://img/relation.svg'},
            {name: '数据中的字段', symbol: 'image://img/field.svg'},
        ];
        var _dss = [
            {
                name: 'adm',
                type: 'ds',
                hasExpand: false,
                desc: 'AdMonitor广告数据',
                category: 0,
                value: 50,
                symbol: 'image://img/log_adm.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: {
                    normal: {
                        color: 'blue',
                        borderColor: 'red',
                    }
                },
                fields: ['cookie', 'spid', 'camp', 'IMEI', 'IDFA', 'AndroidId', 'ip', 'browser', 'os']
            },
            {
                name: 'dmp',
                type: 'ds',
                hasExpand: false,
                desc: 'DMP标签数据',
                category: 1,
                value: 50,
                symbol: 'image://img/relation_dmp.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['cookie', 'IMEI', 'IDFA', 'AndroidId', 'tag']
            },
            {
                name: 'ug',
                type: 'ds',
                hasExpand: false,
                desc: 'UserGraph打通数据',
                category: 1,
                value: 50,
                symbol: 'image://img/relation_ug.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['cookie', 'IMEI', 'IDFA', 'AndroidId']
            },
            {
                name: 'iplib',
                type: 'ds',
                hasExpand: false,
                desc: 'IP-Region库',
                category: 1,
                value: 50,
                symbol: 'image://img/relation_iplib.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['ip', 'region']
            },
            {
                name: 'mm',
                type: 'ds',
                hasExpand: false,
                desc: 'MM核心媒体库',
                category: 1,
                value: 50,
                symbol: 'image://img/relation_mm.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['spid', 'camp', 'media', 'goods', 'industry']
            },
            {
                name: 'stm',
                type: 'ds',
                hasExpand: false,
                desc: 'SiteMonitor网站监测数据',
                category: 0,
                value: 50,
                symbol: 'image://img/log_stm.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['cookie', 'ip', 'website']
            },
            {
                name: 'tvm',
                type: 'ds',
                hasExpand: false,
                desc: 'TVMonitor监测数据',
                category: 0,
                value: 50,
                symbol: 'image://img/log_stm.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['cookie', 'ip', 'website']
            },
            {
                name: 'programa',
                type: 'ds',
                hasExpand: false,
                desc: '剧目数据',
                category: 1,
                value: 50,
                symbol: 'image://img/relation_programa.svg',
                symbolSize: 100,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                fields: ['spid', 'series']
            },
        ];
        var _fields = {
            cookie: {
                name: 'cookie',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'dmp', 'ug', 'stm']
            },
            AndroidId: {
                name: 'AndroidId',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'dmp', 'ug']
            },
            IMEI: {
                name: 'IMEI',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'dmp', 'ug']
            },
            IDFA: {
                name: 'IDFA',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'dmp', 'ug']
            },
            ip: {
                name: 'ip',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'stm', 'iplib']
            },
            spid: {
                name: 'spid',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'mm', 'programa']
            },
            camp: {
                name: 'camp',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm', 'mm']
            },
            tag: {
                name: 'tag',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['dmp']
            },
            region: {
                name: 'region',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['iplib']
            },
            media: {
                name: 'media',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['mm']
            },
            goods: {
                name: 'goods',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['mm']
            },
            industry: {
                name: 'industry',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['mm']
            },
            website: {
                name: 'website',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['stm']
            },
            series: {
                name: 'series',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['programa']
            },
            browser: {
                name: 'browser',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm']
            },
            os: {
                name: 'os',
                type: 'field',
                hasShow: false,
                value: 20,
                symbol: 'image://img/field.svg',
                symbolSize: 70, category: 2,
                draggable: true,
                x: null,
                y: null,
                itemStyle: null,
                dss: ['adm']
            },
        };

        var option = {
            title: {
                text: "DD"
            },
            tooltip: {
                formatter: function (param) {
                    return param.data.desc;
                }
            },
            toolbox: {
                left: '40',
                top: 40,
                feature: {
                    myTool1: {
                        show: true,
                        title: '展开所有数据源',
                        icon: 'image://img/expand.svg',
//                        icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                        onclick: function () {
                            expandAll(true);
                        }
                    },
                    myTool2: {
                        show: true,
                        title: '折叠所有数据源',
                        icon: 'image://img/collapse.svg',
                        onclick: function () {
                            expandAll(false);
                        }
                    }
                }
            },
            legend: [{
                data: _categories.map(function (a) {
                    return {name: a.name, icon: a.symbol};
                })
            }],
            animation: false,
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    roam: false,
                    focusNodeAdjacency: true,
                    label: { //todo
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 20,
                                color: 'black'
                            },
                            offset: [0, -100],//todo
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    categories: _categories,
                    data: _dss,
                    links: [],
                    force: {
                        repulsion: 2000,
                        gravity: 0.1,
//                            edgeLength: [100, 500]
                    }
                }
            ]
        };
        myChart.setOption(option);

        myChart.on('click', function (param) {
            expand(param.data);
        });
    })(window)
</script>
</body>
</html>
